
<template>
    <div class="recommend home-item">
        <div class="wrapper">
            <div class="swiper-container swiper-recommend-banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-recommend-banner-item" v-for="item of bannerItems" :key="item.id">
                        <img class="full" :src="item.url">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <Menu></Menu>
            <Content></Content>
        </div>
    </div>
</template>
<script>

import Menu from './Menu'
import Content from './Content'

export default {
    name: 'Recommend',
    components:{
        Menu,
        Content
    },
    data() {
        return {
            bannerItems:[
                {
                    id:1,
                    url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/933aa067013f420fd7416a535f42b30e.jpg?thumb=1&w=720&h=360'
                },
                {
                    id:2,
                    url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb6c24039b5015780729db5fa341777b.jpg?thumb=1&w=720&h=360'
                },
                {
                    id:3,
                    url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03ff022009a635262d53451d532518ed.jpg?thumb=1&w=720&h=360'
                }
            ]
        }
    },
    mounted() {
        console.log('Recommend mounted');
        new this.$swiper('.swiper-recommend-banner',{
            pagination:{
                el:'.swiper-pagination'
            },
            touchMoveStopPropagation:true
        });

    }
}
</script>
<style lang="stylus">

.swiper-recommend-banner-item
    width:100%;
    height:207px;
</style>